<template>
  <div class="dashboard-container">
    <el-card class="employees-card">
      <!-- 页面头部 -->
      <el-row type="flex" justify="end" class="header">
        <el-col align="right">
          <el-button size="small" type="primary" @click="addEmployees">添加员工</el-button>
        </el-col>
      </el-row>
      <!-- 放置表格 -->
      <el-table border class="table-style" :data="employeesList">
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="image" label="头像">
          <!-- <img :src="image" alt=""> -->
          <template v-slot="{row}">
              <!--
                require('文件路径')： 相当于import form 都表示引入文件
                语法：const res = require('路径')
               -->
              <img
                v-imgError="require('@/assets/bigUserHeader.png')"
                style="width:100px ;border-radius: 50%;"
                :src="row.image"
                alt=""
              >
            </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button size="small" type="primary" @click="setRole(row.id)">设置角色</el-button>
            <el-button size="small" @click="redactEmployees(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delEmployees(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加编辑员工弹窗组件 -->
    <addEmployees ref="addEmployees" :title="title" :showDialog.sync="visibleDialog" @updateEvent="getEmployeesList" />
    <!-- 设置角色弹窗组件 -->
    <setRole ref="setRole" :showDialog.sync="showDialog"/>
  </div>
</template>

<script>
import { getEmployeesList, delEmployees } from "@/api/employees";
import addEmployees from "./components/addEmployees.vue";
import  setRole  from "./components/setRole.vue";
export default {
  components: { addEmployees ,setRole},
  data() {
    return {
      employeesList:[],
      title: '', // 弹窗标题
      visibleDialog: false, // 弹窗默认关闭
      showDialog: false,
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    // 添加员工
    addEmployees() {
      this.title = '添加员工'
      // 显示弹窗
      this.visibleDialog = true
    },
    setRole(id) {
      // 显示弹窗
      this.showDialog = true
      // 调用子组件的方法
        this.$refs.setRole.getEmployeesList(id)
    },
    // 编辑员工
    redactEmployees(id) {
      this.title = '编辑员工'
      // 显示弹窗
      this.visibleDialog = true
      // 调用弹窗组件的方法
      this.$refs.addEmployees.getEmployeesDetail(id)
    },
    // 删除员工
    async delEmployees(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delEmployees(id)
        // 刷新列表
        this.getEmployeesList()
        // 提示用户
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    // 获取员工列表
    async getEmployeesList() {
      const { data } = await getEmployeesList()
      console.log(data);
      this.employeesList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.employees-card {
  margin: 30px;

  .header {
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e6e9;
  }

  .table-style {
    margin-top: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e9e6e9;
  }

  .footer {
    margin-top: 30px;
  }
}
</style>
